<template>
    <div class="box">
        <PageHeaderNav :need-underline="false" :need-back="true" content="监护管理"></PageHeaderNav>
        <van-tabs animated>
            <van-tab v-for="tab in tabs" :title="tab.name" :key="tab.name">
                <van-contact-card
                    class="addWardUser btnFocus"
                    v-if="tab.name === '我监护的人'"
                    type="add"
                    @click="addWardUser"
                    add-text="添加被监护人"
                />
                <!--我监护的人列表-->
                <van-contact-card
                    class="btnFocus"
                    v-for="userInfo in tab.userInfoList"
                    :key="userInfo.uid"
                    type="edit"
                    :name="userInfo.username"
                    :tel="userInfo.email"
                    :editable="tab.allowEdit"
                    v-if="tab.allowEdit"
                    @click="removeBind(userInfo)"
                />
                <!--我的监护人列表-->
                <van-contact-card
                    class="btnFocus"
                    v-for="userInfo in tab.userInfoList"
                    :key="userInfo.uid"
                    type="edit"
                    :name="userInfo.username"
                    :tel="userInfo.email"
                    :editable="tab.allowEdit"
                    v-else
                />
                <van-empty v-if="!tab.userInfoList.length" :description="`还没有${tab.name}噢`"/>
            </van-tab>
        </van-tabs>
    </div>
</template>

<script>

import PageHeaderNav from "@/components/Publlic/PageHeaderNav.vue";

export default {
    components: {
        PageHeaderNav
    },

    data() {
        return {
            // 选项卡数据
            tabs: [
                {
                    name: "我监护的人",
                    allowEdit: true,
                    userInfoList: [],
                },
                {
                    name: "我的监护人",
                    allowEdit: false,
                    userInfoList: [],
                },
            ]
        }
    },

    methods: {
        // 解除绑定
        removeBind(userInfo) {
            this.$dialog.confirm({
                title: '解除绑定',
                message: `确认解除对${userInfo.username}的监护关系吗？`,
                overlay: false
            }).then(() => {
                this.request.post("/cloudGuardian/removeBindRelationship/", {
                    wardUserUid: userInfo.uid
                }).then((response) => {
                    const status = response["code"] === 200

                    if (status) {
                        let userInfoList = this.tabs[0].userInfoList
                        userInfoList.splice(userInfoList.indexOf(userInfo), 1)
                    }
                })
            })
        },

        addWardUser() {
            this.$router.push("/loginView/checkBindCode/")
        }
    },

    created() {
        this.request.post("/cloudGuardian/getBindRelationship/", {}).then((response) => {
            const status = response["code"] === 200

            if (status) {
                // 回写数据
                const bindRelationshipInfo = response["data"]["bindRelationshipInfo"]
                this.tabs[1].userInfoList = bindRelationshipInfo["guardianUserInfoList"]
                this.tabs[0].userInfoList = bindRelationshipInfo["wardUserInfoList"]
            }
        })
    }
}
</script>

<style lang="less" scoped>
.box {
    width: 100%;
    height: 100%;
}

::v-deep {

    .van-tabs {
        width: 100%;
        height: 92%;
    }

    .van-tabs__wrap {
        height: 5%;

        .van-tab__text {
            font-size: 1.3rem;
        }
    }

    .van-tabs__line {
        background-color: var(--color);
    }

    .van-tabs__content {
        height: 94%;
        overflow-y: scroll;

        .van-tab__pane-wrapper {
            padding: 15px;
        }
    }

    .van-cell {
        font-size: 1.5rem;
        background-color: white;
        height: 80px;

        .van-cell__value > div {
            width: 95%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .van-contact-card__value {
            line-height: normal;
        }

        .van-cell__value div:last-child {
            display: none;
        }
    }

    .van-icon {
        font-size: 2rem;
    }

    .van-cell__right-icon {
        font-size: 1.6rem;
    }

    .van-contact-card::before {
        background: var(--grayColor);
    }
}

.addWardUser::before {
    background: none;
}

.addWardUser {
    .van-icon {
        font-size: 2.8rem;
    }

    .van-cell__right-icon {
        display: none;
    }
}
</style>